import React, { Component } from 'react'
// 引入实现平滑滚动的第三方库
import BetterScroll from 'better-scroll'

export default class App extends Component {
    state = {
        list: []
    }

    render() {
        return (
            <div>
                <button onClick={() => { this.getData() }}>click</button>
                <div className='wrapper' style={{ height: '200px', background: 'yellow', overflow: 'hidden' }}>
                    <ul className='content'>
                        {
                            this.state.list.map(item =>
                                <li key={item}>{item}</li>
                            )}
                    </ul>
                </div>
            </div>
        )
    }

    getData = () => {
        let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

        this.setState({
            list: list
        }, () => {
            new BetterScroll('.wrapper')
        })

        // 进行初始化 => 这里dom还没更新完，实例化的早了，要在setState的第二个参数中初始化
        // new BetterScroll('.wrapper')

    }
}
